<template>
  <view class="tab-index">
    <u-sticky
      class="u-sticky"
      offset-top="0"
      bg-color="#f5f5f5"
      h5-nav-height="0"
    >
      <template>
        <header-search-input @clickGetMajor="clickGetMajor" :disabled="true" />
        <!-- 标签切换 -->
        <u-tabs
          :list="tabList"
          :is-scroll="true"
          :current="current"
          @change="tabsCurrentChange"
        ></u-tabs>
      </template>
    </u-sticky>
    <view class="home_warp" v-if="current === 0">
      <!-- 轮播图 -->
      <view class="swiper-wrap">
        <u-swiper :list="banner.bannerList"></u-swiper>
      </view>
      <!-- 导航栏 -->
      <view class="nav_warp">
        <view
          class="nav_item"
          @click="clickNavTo(item)"
          v-for="item in kingKongList"
          :key="item.id"
        >
          <view class="img_warp">
            <image :src="item.url" />
          </view>
          <text class="item_name">{{ item.name }}</text>
        </view>
      </view>

      <!-- 课程 -->
      <view class="course_content">
        <template v-if="courseList[0].noticeCourses">
          <view class="content_header_warp">
            <view class="title_name">直播预告</view>
            <view
              class="title_more"
              @click="watchMore('liveType', 1, '直播预告')"
            >
              查看更多</view
            >
          </view>
          <course-card
            v-for="item in courseList[0].noticeCourses"
            :key="item.id + 'noticeCourses'"
            :item="item"
          />
        </template>
        <template v-if="courseList[0].recommendCourses">
          <view class="content_header_warp">
            <view class="title_name">推荐课程</view>
            <view class="title_more" @click="watchMore('type', 2, '推荐课程')"
              >查看更多
            </view>
          </view>
          <course-card
            v-for="item in courseList[0].recommendCourses"
            :key="item.id + 'recommendCourses'"
            :item="item"
          />
        </template>
        <view class="content_image_warp">
          <image :src="courseList[0].leftImgUrl" />
        </view>
        <template v-if="courseList[0].freeCourses">
          <view class="content_header_warp">
            <view class="title_name">免费好课</view>
            <view class="title_more" @click="watchMore('type', 4, '免费好课')"
              >查看更多
            </view>
          </view>
          <course-card
            v-for="item in courseList[0].freeCourses"
            :key="item.id + 'freeCourses'"
            :item="item"
          />
        </template>
        <template v-if="courseList[0].boutiqueCourses">
          <view class="content_header_warp">
            <view class="title_name">精品课程</view>
            <view class="title_more" @click="watchMore('type', 1, '精品课程')"
              >查看更多
            </view>
          </view>
          <course-card
            v-for="item in courseList[0].boutiqueCourses"
            :key="item.id + 'boutiqueCourses'"
            :item="item"
          />
        </template>
        <view class="content_image_warp">
          <image :src="courseList[0].rightImgUrl" />
        </view>
        <template v-if="courseList[0].specialCourses">
          <view class="content_header_warp">
            <view class="title_name">专项课程</view>
            <view class="title_more" @click="watchMore('type', 3, '专项课程')"
              >查看更多
            </view>
          </view>
          <course-card
            v-for="item in courseList[0].specialCourses"
            :key="item.id + 'specialCourses'"
            :item="item"
          />
        </template>
      </view>

      <!-- 书籍 -->
      <view class="book_content" v-if="courseList[0].commodityInfoList">
        <view class="content_header_warp book_header">
          <view class="title_name">书籍专栏</view>
          <view class="title_more" @click="watchMore('book', '', '书籍专栏')"
            >查看更多
          </view>
        </view>
        <book-card
          v-for="item in courseList[0].commodityInfoList"
          :item="item"
          :key="item.id + 'commodityInfoList'"
        />
      </view>
    </view>
    <view class="search_warp" v-else>
      <course-card
        v-for="item in courseList[current].list"
        :key="item.id"
        :item="item"
      />
    </view>

    <u-back-top
      :scroll-top="scrollTop"
      top="500"
      :duration="500"
      mode="square"
      :customStyle="customStyle"
      :iconStyle="iconStyle"
    ></u-back-top>
  </view>
</template>

<script>
import list from "@/config/list.js";
import { homePageIndex, coursePackageList } from "@/api/course.js";
import { homePageBanner } from "@/api/banner.js";
export default {
  data() {
    return {
      customStyle: {
        // background: '#0058A3'
      },
      iconStyle: {
        fontSize: "32upx",
        color: "#2979ff",
      },
      kingKongList: list.indexNavList,
      tabList: list.indexTabsList,
      current: 0,
      courseList: [],
      banner: {},
      pageNumList: [],
      pageSize: 20,
      scrollTop: 0,
    };
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },

  async onLoad() {
    const list = this.tabList.map((v) => {
      return {
        list: [],
        total: 0,
      };
    });
    this.courseList = list;
    const pageNumList = this.tabList.map(() => 1);
    this.pageNumList = pageNumList;
    const courseRes = await homePageIndex();
    console.log(courseRes);
    const bannerRes = await homePageBanner({
      bannerType: 0,
    });
    this.banner = bannerRes;
    this.courseList[0] = courseRes;
    
    this.banner.bannerList = bannerRes.list.map((v) => {
      return {
        id: v.id,
        image: v.imgUrl,
        name: v.name,
      };
    });
  },

  computed: {
    SystemInfo: function () {
      return this.$store.state.equipment.SystemInfo;
    },
    hasMore: function () {
      return (
        this.pageSize * (this.pageNumList[this.current] - 1) >
        this.courseList[this.current].total
      );
    },
  },
  onReachBottom() {
    const { current, pageSize, pageNumList, courseList, tabList } = this;
    if (current === 0) return;
    if (courseList[current].length === 0) return;
    if (this.hasMore) {
      return;
    }
    const params = {
      pageSize,
      pageNum: pageNumList[current],
      type: tabList[current].type,
    };
    this.getCoursePackageList(params);
  },
  methods: {
    // 点击查看更多
    watchMore(type, val, title) {
      const params = {};
      params[type] = val;
      params.title = title;
      this.$u.route({
        url: "pages/tabbar/tab_index/more",
        params,
      });
    },
    // 获取其他课程分类
    getCoursePackageList(params) {
      coursePackageList(params).then((res) => {
        console.log(res);
        const { current, pageNumList, courseList } = this;
        this.pageNumList[current] = pageNumList[current] + 1;
        let list = [...courseList[current].list, ...res.list];
        this.courseList[current].list = list;
        this.courseList[current].total = res.total;
      });
    },

    // tab发生改变
    tabsCurrentChange(index) {
      this.current = index;
      if (index === 0) return;
      const { current, pageSize, pageNumList, courseList, tabList } = this;
      if (courseList[current].list.length > 0) return;
      const params = {
        fail: this.backTabIndex,
        pageSize,
        pageNum: pageNumList[current],
        type: tabList[current].type,
      };
      this.scrollTop = 0;
      this.getCoursePackageList(params);
    },
    backTabIndex() {
      this.current = 0;
    },
    // 导航栏跳转
    clickNavTo(item) {
      this.$u.route(item.path, {
        ...item.params,
      });
    },
    clickGetMajor(options) {
      // this.$u.route("/pages/search/search", {
      //   ...options,
      // });
    },
  },
};
</script>

<style lang="scss" scoped>
.tab-index {
  color: $color-text-theme;
  width: 100%;
  height: 100vh;

  .u-sticky {
    background-color: #f5f5f5;
  }

  .home_warp {
    // #ifdef H5
    padding-bottom: 50px;
    // #endif

    .swiper-wrap {
      padding: 0 30upx;
    }

    .nav_warp {
      margin-top: 10upx;
      padding: 30upx;
      width: 100%;
      height: 180upx;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: space-around;

      .nav_item {
        display: flex;
        flex-direction: column;
        align-items: center;

        .img_warp {
          width: 72upx;
          height: 70upx;
        }

        .item_name {
          margin-top: 10upx;
          height: 40upx;
          font-size: 28upx;
          font-weight: bold;
          line-height: 40upx;
          // color: $color-text-theme;
        }
      }
    }

    .course_content {
      padding: 20upx 30upx;

      .content_image_warp {
        margin-top: 18upx;
        width: 100%;
        height: 240upx;
        margin-bottom: 30upx;
      }
    }

    .content_header_warp {
      margin-bottom: 20upx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .title_name {
        height: 44upx;
        font-size: 32upx;
        font-weight: bold;
        line-height: 44upx;
      }

      .title_more {
        height: 32upx;
        font-size: 22upx;
        font-weight: 500;
        line-height: 32upx;
        color: #666666;
      }
    }

    .book_content {
      width: 100vw;
      background-color: #fff;
      padding: 26upx 30upx;

      .book_header {
        margin-top: 0;
      }
    }
  }

  .search_warp {
    padding: 30upx;
    // #ifdef H5
    padding-bottom: 50px;
    // #endif
  }

  .swiper-content {
    width: 100%;

    .swiper_content_item {
    }
  }
}
</style>
